<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.zpyr.mvc.vo.Carc_evaluation"%>
<%@page import="java.util.List"%>
<%@page import="com.zpyr.mvc.vo.Carc_info"%>
<%@page import="com.zpyr.common.StringUtil"%>
<!DOCTYPE html>
<html>
<head>
<%
	String distance = request.getParameter("distance");
	String lat = request.getParameter("lat");
	String lng = request.getParameter("lng");

	List<Carc_info> carc_list = (List<Carc_info>) request.getAttribute("carc_list");
%>
<title>주변검색 - 지도보기</title>
<link rel="stylesheet" href="/css/common.css" />
<style>

</style>
</head>
<body>

<div id="header" class="header">
<span style="">주변검색</span>
<span style="float: right; margin-left:10px;" class="button1" onclick="goSearchAroundList( $('select[name=search_around]').val() )">리스트보기</span>
<span style="float: right;" class="button1">
<select name="search_around" onchange="goSearchAroundMap(this.value)">
<option value="100">100m</option>
<option value="300">300m</option>
<option value="500">500m</option>
<option value="1000">1km</option>
</select>
</span>
</div>

<div id="map_div" style="width:100%; height:100%; min-height:400px;"></div>
<script>
$('select[name="search_around"]').val('<%=distance%>');

{
	var cmap = googleMap(<%=lat%> , <%=lng%>);
	
	var distance = <%=distance%>;
	var zoom = 17;
	if(distance >= 300) zoom = 16;
	if(distance >= 500) zoom = 15;
	if(distance >= 1000) zoom = 14;
	cmap.setZoom( zoom );
	
	var circle = new google.maps.Circle({
		center: new google.maps.LatLng(<%=lat%> , <%=lng%>),
		fillColor: '#0055ff',
		fillOpacity: 0.2,
		map: cmap,
		radius: distance,
		strokeOpacity: 0.1
	});
	var greenIcon = new google.maps.MarkerImage(
		 "http://labs.google.com/ridefinder/images/mm_20_green.png",
		   new google.maps.Size(12, 20),
		   new google.maps.Point(0, 0),
		   new google.maps.Point(6, 20)
	);
	var latlng;
	var marker;
<%
	if(carc_list != null) {
		for( Carc_info carc_info : carc_list ) {
%>

		latlng = new google.maps.LatLng(<%=carc_info.getLat()%> , <%=carc_info.getLng()%>);
		marker = new google.maps.Marker({
			icon: greenIcon ,
			position: latlng,
			map: cmap,
			title: "<%=carc_info.getName()%> - <%=carc_info.getStrDistance()%>"
		});
		
		google.maps.event.addListener(marker, 'click', function(){
			new google.maps.InfoWindow({
				content: "<div style='width:150px; height:50px; cursor:pointer;' onclick='goCarcenterInfoPage(<%=carc_info.getInfo_seq()%>);' ><p style='text-align:center; font-size:11px;'>"+ "<%=carc_info.getName()%> - <%=carc_info.getStrDistance()%>" +"</p></div>"
			}).open(cmap , this);
		});
		
<%
		}
	}
%>
}
</script>
</body>
</html>